import React, { createContext, useContext } from "react";

// useContext是用来做跨组件通信的
// 但是不能离开createContext
// 只是写法上面的优化

// 传值依旧使用Provider，但是接受的时候不需要使用Consumer了

const context = createContext();
// const { Provider, Consumer } = context;

// const Child2 = () => {
//   return (
//     <div>
//       child2子组件 -{" "}
//       <context.Consumer>
//         {(value) => <span>{value.count}</span>}
//       </context.Consumer>
//     </div>
//   );
// };

const Child2 = () => {
  const { count } = useContext(context);

  return <div>child2子组件 - {count}</div>;
};

const Child = () => {
  return (
    <>
      <div>child子组件</div>
      <Child2 />
    </>
  );
};

const App = () => {
  return (
    <context.Provider
      value={{
        count: 10,
      }}
    >
      <h2>useContext</h2>
      <Child />
    </context.Provider>
  );
};

export default App;
